﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--[if IE 8 ]>
<html class="ie" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"><!--<![endif]-->
<head>
    <!-- Basic Page Needs -->
    <meta charset="UTF-8">
    <!--[if IE]>
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
    <title>Techno Store - Home 2</title>
    <meta name="author" content="CreativeLayers">
    <!-- Mobile Specific Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- Boostrap style -->
    <link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" type="text/css" href="/stylesheets/style.css">
    <!-- Reponsive -->
    <link rel="stylesheet" type="text/css" href="/stylesheets/responsive.css">
    <link rel="shortcut icon" href="/favicon/favicon.png">
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css" media="all">

</head>
<body class="header_sticky background">
<div class="boxed">

    <div class="overlay"></div>

    <!-- Preloader -->
    <div class="preloader">
        <div class="clear-loading loading-effect-2">
            <span></span>
        </div>
    </div><!-- /.preloader -->

    <div th:insert="~{header :: #header}"></div>

    <div class="divider35"></div>

    <section class="flat-row flat-slider">
        <div class="container">
            <div class="row">
                <div class="col-md-12">

                    <div class="layui-carousel" id="test1">
                        <div carousel-item>
                            
                            <div th:each="recipes:${recipes}">
                                <a target="_blank" th:href="'/recipes/recipesDetail?recipesId='+ ${recipes.id}" >
                                    <img style="height: 500px; width: 1200px;" th:src="'http://47.94.10.67/images/' + ${recipes.imgUrl}" alt="">
                                </a>
                            </div>
                        </div>
                    </div>

                    </div>
                </div>
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.flat-slider -->


    <section class="flat-row flat-imagebox style1">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="flat-row-title">
                        <h3>热门销售</h3>
                    </div><!-- /.flat-row-title -->
                </div><!-- /.col-md-12 -->
            </div><!-- /.row -->
            <div class="row">

                <!--分组-->
                <div class="col-md-4" th:each="hot:${foods}">
                    <div class="product-box style1">
                        <div class="imagebox style1">
                            <div class="box-image">
                                <a th:href="'/page/foodDetail?foodId=' + ${hot.id}" title="">
                                    <img style="height: 160px;width: 160px;" th:src="'http://47.94.10.67/images/' + ${hot.imgUrl}" alt="">
                                </a>
                            </div><!-- /.box-image -->
                            <div class="box-content">
                                <div class="cat-name">
                                    <a  title="" th:text="'区服：' + ${hot.place}"></a>
                                </div>
                                <div class="product-name">
                                    <a th:href="'/page/foodDetail?foodId=' + ${hot.id}"title="" th:text="${hot.foodName}"></a>
                                </div>
                                <div class="price">
                                    <span class="regular" th:text="'原价：' + ${hot.oldPrice} + '元'"></span>
                                    <span class="sale" th:text="'现价：'+${hot.nowPrice}+ '元'"></span>
                                </div>
                            </div><!-- /.box-content -->
                            <div class="box-bottom">
                                <div class="btn-add-cart">
                                    <a th:href="'/cart/addCart?foodId=' + ${hot.id}" title="">
                                        <img src="/images/icons/add-cart.png" alt="">添加到购物车
                                    </a>
                                </div>
                            </div><!-- /.box-bottom -->
                        </div><!-- /.imagebox style1 -->
                    </div><!-- /.product-box style1 -->
                </div><!-- /.col-md-4 -->


            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.flat-imagebox style1 -->




    <section class="flat-iconbox">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="iconbox">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/car.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">全球送货</font></font></h3>
                            </div>
                        </div><!-- /.box-header -->
                        <div class="box-content">
                            <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">订单满$ 100免运费</font></font></p>
                        </div><!-- /.box-content -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-md-3 -->
                <div class="col-md-3">
                    <div class="iconbox">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/order.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">在线订购服务</font></font></h3>
                            </div>
                        </div><!-- /.box-header -->
                        <div class="box-content">
                            <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">30天内免费退货</font></font></p>
                        </div><!-- /.box-content -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-md-3 -->
                <div class="col-md-3">
                    <div class="iconbox">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/payment.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">付款</font></font></h3>
                            </div>
                        </div><!-- /.box-header -->
                        <div class="box-content">
                            <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">安全系统</font></font></p>
                        </div><!-- /.box-content -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-md-3 -->
                <div class="col-md-3">
                    <div class="iconbox">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/return.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">返回30天</font></font></h3>
                            </div>
                        </div><!-- /.box-header -->
                        <div class="box-content">
                            <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">30天内免费退货</font></font></p>
                        </div><!-- /.box-content -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-md-3 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section>


    <div th:insert="~{footer :: #footer}"></div>

    <section class="footer-bottom">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <p class="copyright">All Rights Reserved © Techno Store 2017</p>
                    <p class="btn-scroll">
                        <a href="#" title="">
                            <img src="/images/icons/top.png" alt="">
                        </a>
                    </p>
                </div><!-- /.col-md-12 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.footer-bottom -->
</div><!-- /.boxed -->

<!-- Javascript -->
<script type="text/javascript" src="/javascript/jquery.min.js"></script>
<script type="text/javascript" src="/javascript/tether.min.js"></script>
<script type="text/javascript" src="/javascript/bootstrap.min.js"></script>
<script type="text/javascript" src="/javascript/waypoints.min.js"></script>
<!-- <script type="text/javascript" /src="javascript/jquery.circlechart.js"></script> -->
<script type="text/javascript" src="/javascript/easing.js"></script>
<script type="text/javascript" src="/javascript/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="/javascript/owl.carousel.js"></script>
<script type="text/javascript" src="/javascript/smoothscroll.js"></script>
<!-- <script type="text/javascript" /src="javascript/jquery-ui.js"></script> -->
<script type="text/javascript" src="/javascript/jquery.mCustomScrollbar.js"></script>
<script type="text/javascript" src="/javascript/gmap3.min.js"></script>
<script type="text/javascript" src="/javascript/waves.min.js"></script>
<script type="text/javascript" src="/javascript/jquery.countdown.js"></script>
<script type="text/javascript" src="/javascript/main.js"></script>
<script src="/layui/layui.js"></script>
<script>
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            ,height: '500px' //切换动画方式
        });
    });
</script>
</body>
</html>